<html>
<head>
<title>备用.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #e8bf6a;}
.s1 { color: #a9b7c6;}
.s2 { color: #bababa;}
.s3 { color: #a5c261;}
.s4 { color: #cc7832;}
.s5 { color: #6897bb;}
.s6 { color: #808080;}
.s7 { color: #6a8759;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
备用.html</font>
</center></td></tr></table>
<pre><span class="s0">&lt;!DOCTYPE </span><span class="s2">html</span><span class="s0">&gt;</span>
<span class="s0">&lt;html </span><span class="s2">xmlns</span><span class="s3">=&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="s0">&gt;</span>
<span class="s0">&lt;head&gt;</span>
  <span class="s0">&lt;link </span><span class="s2">href</span><span class="s3">=&quot;../css/login.css&quot; </span><span class="s2">rel</span><span class="s3">=&quot;stylesheet&quot;</span><span class="s0">/&gt;</span>

  <span class="s0">&lt;meta </span><span class="s2">charset</span><span class="s3">=&quot;utf-8&quot;</span><span class="s0">/&gt;</span>
  <span class="s0">&lt;meta </span><span class="s2">name</span><span class="s3">=&quot;viewport&quot; </span><span class="s2">content</span><span class="s3">=&quot;width=device-width, initial-scale=1.0&quot;</span><span class="s0">/&gt;</span>
  <span class="s0">&lt;title&gt;</span><span class="s1">登陆页面</span><span class="s0">&lt;/title&gt;</span>

  <span class="s0">&lt;link </span><span class="s2">href</span><span class="s3">=&quot;../css/bootstrap.min.css&quot; </span><span class="s2">rel</span><span class="s3">=&quot;stylesheet&quot;</span><span class="s0">/&gt;</span>
  <span class="s0">&lt;link </span><span class="s2">href</span><span class="s3">=&quot;../css/font-awesome.css&quot; </span><span class="s2">rel</span><span class="s3">=&quot;stylesheet&quot;</span><span class="s0">/&gt;</span>

  <span class="s0">&lt;style&gt;</span>
    <span class="s1">[</span><span class="s0">v-cloak</span><span class="s1">] {</span>
      <span class="s2">display</span><span class="s1">: </span><span class="s3">none</span><span class="s4">;</span>
    <span class="s1">}</span>
  <span class="s0">&lt;/style&gt;</span>
<span class="s0">&lt;/head&gt;</span>
<span class="s0">&lt;body </span><span class="s2">style</span><span class="s3">=&quot;</span><span class="s2">background-color</span><span class="s1">: </span><span class="s5">#E2E2E2</span><span class="s4">;</span><span class="s3">&quot;</span><span class="s0">&gt;</span>
<span class="s0">&lt;div </span><span class="s2">id</span><span class="s3">=&quot;app&quot; </span><span class="s2">class</span><span class="s3">=&quot;container&quot; </span><span class="s2">v-cloak</span><span class="s0">&gt;</span>
  <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;row text-center &quot; </span><span class="s2">style</span><span class="s3">=&quot;</span><span class="s2">padding-top</span><span class="s1">:</span><span class="s5">100</span><span class="s3">px</span><span class="s4">;</span><span class="s3">&quot;</span><span class="s0">&gt;</span>
    <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;col-md-12&quot;</span><span class="s0">&gt;</span>
      <span class="s0">&lt;h2&gt;</span><span class="s1">欢迎登陆后台管理系统</span><span class="s0">&lt;/h2&gt;</span>
    <span class="s0">&lt;/div&gt;</span>
  <span class="s0">&lt;/div&gt;</span>
  <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;row &quot;</span><span class="s0">&gt;</span>

    <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1&quot;</span><span class="s0">&gt;</span>

      <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;panel-body&quot;</span><span class="s0">&gt;</span>
        <span class="s0">&lt;form </span><span class="s2">role</span><span class="s3">=&quot;form&quot;</span><span class="s0">&gt;</span>
          <span class="s0">&lt;hr/&gt;</span>
          <span class="s0">&lt;br/&gt;</span>
          <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;form-group input-group&quot;</span><span class="s0">&gt;</span>
            <span class="s0">&lt;span </span><span class="s2">class</span><span class="s3">=&quot;input-group-addon&quot;</span><span class="s0">&gt;&lt;i </span><span class="s2">class</span><span class="s3">=&quot;fa fa-tag&quot;</span><span class="s0">&gt;&lt;/i&gt;&lt;/span&gt;</span>
            <span class="s0">&lt;input </span><span class="s2">type</span><span class="s3">=&quot;text&quot; </span><span class="s2">class</span><span class="s3">=&quot;form-control&quot; </span><span class="s2">v-model</span><span class="s3">=&quot;user.name&quot; </span><span class="s2">placeholder</span><span class="s3">=&quot;用户名&quot;</span><span class="s0">/&gt;</span>
          <span class="s0">&lt;/div&gt;</span>
          <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;form-group input-group&quot;</span><span class="s0">&gt;</span>
            <span class="s0">&lt;span </span><span class="s2">class</span><span class="s3">=&quot;input-group-addon&quot;</span><span class="s0">&gt;&lt;i </span><span class="s2">class</span><span class="s3">=&quot;fa fa-lock&quot;</span><span class="s0">&gt;&lt;/i&gt;&lt;/span&gt;</span>
            <span class="s0">&lt;input </span><span class="s2">type</span><span class="s3">=&quot;password&quot; </span><span class="s2">class</span><span class="s3">=&quot;form-control&quot; </span><span class="s2">v-model</span><span class="s3">=&quot;user.password&quot; </span><span class="s2">placeholder</span><span class="s3">=&quot; 密码&quot;</span><span class="s0">/&gt;</span>
          <span class="s0">&lt;/div&gt;</span>
          <span class="s0">&lt;h5&gt;</span><span class="s1">请选择角色</span><span class="s0">&lt;/h5&gt;</span>
          <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;form-group input-group&quot;</span><span class="s0">&gt;</span>
            <span class="s0">&lt;span </span><span class="s2">class</span><span class="s3">=&quot;input-group-addon&quot;</span><span class="s0">&gt;&lt;i </span><span class="s2">class</span><span class="s3">=&quot;fa fa-user&quot;</span><span class="s0">&gt;&lt;/i&gt;&lt;/span&gt;</span>
            <span class="s0">&lt;select </span><span class="s2">v-model</span><span class="s3">=&quot;user.level&quot; </span><span class="s2">class</span><span class="s3">=&quot;form-control&quot; </span><span class="s2">style</span><span class="s3">=&quot;</span><span class="s2">height</span><span class="s1">:</span><span class="s5">35</span><span class="s3">px</span><span class="s4">;</span><span class="s3">&quot;</span><span class="s0">&gt;</span>
              <span class="s0">&lt;option </span><span class="s2">v-for</span><span class="s3">=&quot;item in authorities&quot; </span><span class="s2">:value</span><span class="s3">=&quot;item.level&quot; </span><span class="s2">name</span><span class="s3">=&quot;level&quot;</span><span class="s0">&gt;</span><span class="s1">{{item.name}}</span><span class="s0">&lt;/option&gt;</span>
            <span class="s0">&lt;/select&gt;</span>
          <span class="s0">&lt;/div&gt;</span>
          <span class="s6">&lt;!-- 新增验证码输入框 --&gt;</span>
          <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;form-group input-group&quot;</span><span class="s0">&gt;</span>
            <span class="s0">&lt;span </span><span class="s2">class</span><span class="s3">=&quot;input-group-addon&quot;</span><span class="s0">&gt;&lt;i </span><span class="s2">class</span><span class="s3">=&quot;fa fa-key&quot;</span><span class="s0">&gt;&lt;/i&gt;&lt;/span&gt;</span>
            <span class="s0">&lt;input </span><span class="s2">type</span><span class="s3">=&quot;text&quot; </span><span class="s2">class</span><span class="s3">=&quot;form-control&quot; </span><span class="s2">v-model</span><span class="s3">=&quot;user.captcha&quot; </span><span class="s2">placeholder</span><span class="s3">=&quot;验证码&quot;</span><span class="s0">/&gt;</span>
            <span class="s0">&lt;img </span><span class="s2">:src</span><span class="s3">=&quot;captchaSrc&quot; </span><span class="s2">@click</span><span class="s3">=&quot;refreshCaptcha&quot; </span><span class="s2">style</span><span class="s3">=&quot;</span><span class="s2">cursor</span><span class="s1">: </span><span class="s3">pointer</span><span class="s4">;</span><span class="s3">&quot;</span><span class="s0">/&gt;</span>
          <span class="s0">&lt;/div&gt;</span>
          <span class="s0">&lt;div </span><span class="s2">class</span><span class="s3">=&quot;form-group&quot;</span><span class="s0">&gt;</span>
            <span class="s0">&lt;label </span><span class="s2">class</span><span class="s3">=&quot;checkbox-inline&quot;</span><span class="s0">&gt;</span>

            <span class="s0">&lt;/label&gt;</span>
            <span class="s0">&lt;span </span><span class="s2">class</span><span class="s3">=&quot;pull-right&quot;</span><span class="s0">&gt;</span>
                               <span class="s0">&lt;a </span><span class="s2">href</span><span class="s3">=&quot;javascript:void(0)&quot; </span><span class="s2">@click</span><span class="s3">=&quot;reset&quot;</span><span class="s0">&gt;</span><span class="s1">忘记密码?</span><span class="s0">&lt;/a&gt;</span>
                        <span class="s0">&lt;/span&gt;</span>
          <span class="s0">&lt;/div&gt;</span>

          <span class="s0">&lt;div </span><span class="s2">style</span><span class="s3">=&quot;</span><span class="s2">text-align</span><span class="s1">: </span><span class="s3">center&quot;</span><span class="s0">&gt;</span>
            <span class="s0">&lt;a </span><span class="s2">href</span><span class="s3">=&quot;javascript:void(0)&quot; </span><span class="s2">@click</span><span class="s3">=&quot;login&quot; </span><span class="s2">class</span><span class="s3">=&quot;btn btn-primary&quot;</span><span class="s0">&gt;</span><span class="s1">登陆</span><span class="s0">&lt;/a&gt;</span>
          <span class="s0">&lt;/div&gt;</span>
          <span class="s0">&lt;hr/&gt;</span>
          <span class="s0">&lt;div </span><span class="s2">style</span><span class="s3">=&quot;</span><span class="s2">text-align</span><span class="s1">: </span><span class="s3">center&quot;</span><span class="s0">&gt;</span>
            <span class="s1">没有账号 ? </span><span class="s0">&lt;a </span><span class="s2">href</span><span class="s3">=&quot;register.html&quot; </span><span class="s2">target</span><span class="s3">=&quot;_blank&quot;</span><span class="s0">&gt;</span><span class="s1">点我注册 </span><span class="s0">&lt;/a&gt;</span>
          <span class="s0">&lt;/div&gt;</span>

        <span class="s0">&lt;/form&gt;</span>
      <span class="s0">&lt;/div&gt;</span>

    <span class="s0">&lt;/div&gt;</span>
  <span class="s0">&lt;/div&gt;</span>
<span class="s0">&lt;/div&gt;</span>

<span class="s0">&lt;script </span><span class="s2">src</span><span class="s3">=&quot;../js/vue2.6.11/vue.min.js&quot;</span><span class="s0">&gt;&lt;/script&gt;</span>
<span class="s0">&lt;script </span><span class="s2">src</span><span class="s3">=&quot;../js/vue2.6.11/axios.js&quot;</span><span class="s0">&gt;&lt;/script&gt;</span>
<span class="s0">&lt;script </span><span class="s2">src</span><span class="s3">=&quot;../js/vue2.6.11/vaptcha.js&quot;</span><span class="s0">&gt;&lt;/script&gt; </span><span class="s6">&lt;!-- 添加 Vaptcha 验证码 JS 文件 --&gt;</span>
<span class="s0">&lt;script&gt;</span>
  <span class="s4">new </span><span class="s1">Vue({</span>
    <span class="s1">el: </span><span class="s7">&quot;#app&quot;</span><span class="s4">,</span>
    <span class="s1">data: {</span>
      <span class="s1">user: {</span>
        <span class="s1">name: </span><span class="s7">&quot;&quot;</span><span class="s4">,</span>
        <span class="s1">password: </span><span class="s7">&quot;&quot;</span><span class="s4">,</span>
        <span class="s1">level: </span><span class="s4">null</span>
      <span class="s1">}</span><span class="s4">,</span>
      <span class="s1">authorities: []</span><span class="s4">,</span>
      <span class="s1">vid: </span><span class="s4">null, </span><span class="s6">// 添加 vid 属性用于存储 Vaptcha VID</span>
    <span class="s1">}</span><span class="s4">,</span>
    <span class="s1">created: </span><span class="s4">function </span><span class="s1">() {</span>
      <span class="s1">axios.get(</span><span class="s7">&quot;/getAuthority&quot;</span><span class="s1">).then(res =&gt; {</span>
        <span class="s4">if </span><span class="s1">(res.data.code === </span><span class="s7">'0'</span><span class="s1">) {</span>
          <span class="s4">this</span><span class="s1">.authorities = res.data.data</span><span class="s4">;</span>
        <span class="s1">} </span><span class="s4">else </span><span class="s1">{</span>
          <span class="s1">alert(res.data.msg)</span><span class="s4">;</span>
        <span class="s1">}</span>
      <span class="s1">})</span><span class="s4">;</span>
      <span class="s4">this</span><span class="s1">.initVaptcha()</span><span class="s4">; </span><span class="s6">// 在 created 钩子函数中调用 initVaptcha 方法</span>
    <span class="s1">}</span><span class="s4">,</span>
    <span class="s1">methods: {</span>
      <span class="s1">login() {</span>
        <span class="s4">if </span><span class="s1">(!</span><span class="s4">this</span><span class="s1">.user.name) {</span>
          <span class="s1">alert(</span><span class="s7">&quot;请输入用户名&quot;</span><span class="s1">)</span><span class="s4">;</span>
          <span class="s4">return;</span>
        <span class="s1">}</span>
        <span class="s4">if </span><span class="s1">(!</span><span class="s4">this</span><span class="s1">.user.password) {</span>
          <span class="s1">alert(</span><span class="s7">&quot;请输入密码&quot;</span><span class="s1">)</span><span class="s4">;</span>
          <span class="s4">return;</span>
        <span class="s1">}</span>
        <span class="s4">if </span><span class="s1">(!</span><span class="s4">this</span><span class="s1">.user.level) {</span>
          <span class="s1">alert(</span><span class="s7">&quot;请选择角色&quot;</span><span class="s1">)</span><span class="s4">;</span>
          <span class="s4">return;</span>
        <span class="s1">}</span>
        <span class="s6">// 添加 Vaptcha 验证码校验逻辑</span>
        <span class="s1">vaptcha({</span>
          <span class="s1">vid: </span><span class="s4">this</span><span class="s1">.vid</span><span class="s4">,</span>
          <span class="s1">type: </span><span class="s7">'click'</span><span class="s4">,</span>
          <span class="s1">scene: </span><span class="s5">0</span><span class="s4">,</span>
          <span class="s1">container: </span><span class="s7">'#vaptchaContainer'</span>
        <span class="s1">}).then((res) =&gt; {</span>
          <span class="s4">if </span><span class="s1">(res.data.result === </span><span class="s7">'success'</span><span class="s1">) {</span>
            <span class="s1">axios.post(</span><span class="s7">'/login'</span><span class="s4">, this</span><span class="s1">.user).then(res =&gt; {</span>
              <span class="s4">if</span><span class="s1">(res.data.code === </span><span class="s7">'0'</span><span class="s1">) {</span>
                <span class="s1">localStorage.setItem(</span><span class="s7">'user'</span><span class="s4">, </span><span class="s1">JSON.stringify(res.data.data))</span><span class="s4">;</span>
                <span class="s1">window.location = </span><span class="s7">'/front/index.html'</span><span class="s4">;</span>
              <span class="s1">} </span><span class="s4">else </span><span class="s1">{</span>
                <span class="s1">alert(res.data.msg)</span><span class="s4">;</span>
              <span class="s1">}</span>
            <span class="s1">})</span><span class="s4">;</span>
          <span class="s1">} </span><span class="s4">else </span><span class="s1">{</span>
            <span class="s1">alert(</span><span class="s7">'验证码错误'</span><span class="s1">)</span><span class="s4">;</span>
          <span class="s1">}</span>
        <span class="s1">})</span><span class="s4">;</span>
      <span class="s1">}</span><span class="s4">,</span>
      <span class="s1">reset() {</span>
        <span class="s4">if </span><span class="s1">(!</span><span class="s4">this</span><span class="s1">.user.name) {</span>
          <span class="s1">alert(</span><span class="s7">&quot;请输入用户名&quot;</span><span class="s1">)</span><span class="s4">;</span>
          <span class="s4">return;</span>
        <span class="s1">}</span>
        <span class="s4">if </span><span class="s1">(!</span><span class="s4">this</span><span class="s1">.user.level) {</span>
          <span class="s1">alert(</span><span class="s7">&quot;请选择角色&quot;</span><span class="s1">)</span><span class="s4">;</span>
          <span class="s4">return;</span>
        <span class="s1">}</span>
        <span class="s1">axios.post(</span><span class="s7">'/resetPassword'</span><span class="s4">, this</span><span class="s1">.user).then(res =&gt; {</span>
          <span class="s4">if</span><span class="s1">(res.data.code === </span><span class="s7">'0'</span><span class="s1">) {</span>
            <span class="s1">alert(</span><span class="s7">&quot;重置密码成功，密码重置为：123456&quot;</span><span class="s1">)</span>
          <span class="s1">} </span><span class="s4">else </span><span class="s1">{</span>
            <span class="s1">alert(res.data.msg)</span><span class="s4">;</span>
          <span class="s1">}</span>
        <span class="s1">})</span><span class="s4">;</span>
      <span class="s1">}</span><span class="s4">,</span>
      <span class="s6">// 添加 Vaptcha 验证码初始化方法</span>
      <span class="s1">initVaptcha() {</span>
        <span class="s1">axios.get(</span><span class="s7">'/getVaptchaVid'</span><span class="s1">).then(res =&gt; {</span>
          <span class="s4">if </span><span class="s1">(res.data.code === </span><span class="s7">'0'</span><span class="s1">) {</span>
            <span class="s4">this</span><span class="s1">.vid = res.data.data.vid</span><span class="s4">;</span>
            <span class="s1">vaptcha({</span>
              <span class="s1">vid: </span><span class="s4">this</span><span class="s1">.vid</span><span class="s4">,</span>
              <span class="s1">type: </span><span class="s7">'click'</span><span class="s4">,</span>
              <span class="s1">scene: </span><span class="s5">0</span><span class="s4">,</span>
              <span class="s1">container: </span><span class="s7">'#vaptchaContainer'</span>
            <span class="s1">}).then((vaptchaObj) =&gt; {</span>
              <span class="s6">// console.log(vaptchaObj);</span>
            <span class="s1">})</span><span class="s4">;</span>
          <span class="s1">} </span><span class="s4">else </span><span class="s1">{</span>
            <span class="s1">alert(res.data.msg)</span><span class="s4">;</span>
          <span class="s1">}</span>
        <span class="s1">})</span><span class="s4">;</span>
      <span class="s1">}</span>
    <span class="s1">}</span>
  <span class="s1">})</span><span class="s4">;</span>
<span class="s0">&lt;/script&gt;</span>

</pre>
</body>
</html>